<template>
  <view class="shopPage_box">
    <!-- 无数据-缺省頁 -->
    <DefaultPage
      tips="还没有人给你供货，"
      tips2="快去邀请有货源的朋友来给你供货吧。"
      :custoBtn="true"
      type="3"
      :minusHeight="0"
      v-if="!searchCriteria&&!shopList.length && !getParams.loading"
    >
      <view class="u-flex">
        <button class="buttonStyleNone defaultBtn" open-type="share">
          邀请好友来供货
        </button>
      </view>
    </DefaultPage>
    <!-- 搜索无数据-缺省頁 -->
    <DefaultPage
      tips="暂未搜到相关结果，换个关键词试试～"
      type="3"
      :minusHeight="0"
      v-if="searchCriteria&&!shopList.length && !getParams.loading"
    >
    </DefaultPage>
    <!-- 店铺列表 -->
    <ScrollList
      v-else
      ref="scrollView"
      :minusHeight="0"
      @interrupt="interrupt"
      @scrolltolower="scrolltolower"
    >
      <template slot="content" class="u-p-24">
        <view
          v-for="(item, index) in shopList"
          :key="index"
          @click="navigateTo({url: `/pagesB/selectionCenter/shopDetails?accountId=${item.accountId}`})"
          class="u-p-24 shopList_box">
          <view class="shop_user_box">
            <view class="shop_user_l">
              <image class="u-m-r-16 communityLogo_box" :src="item.communityLogo" alt="" mode="aspectFill">
              <view class="fz-14 fw6 communityName_box">{{item.communityName}}</view>
            </view>
            <view class="shop_user_r u-flex fz-12">查看更多<i class="iconfont icon-arrow_right fz-12"></i></view>
          </view>
          <view class="goods_msg_list justify-between u-m-t-24">
            <view v-for="(goods, goodsIndex) in item.goodsSquareVOList" :key="goodsIndex" v-if="goodsIndex<3">
              <view>
                <image :src="coverImgHandleFn(goods.image[0].url,196,196)" mode="scaleToFill" style="width:196rpx;height:196rpx;border-radius: 16rpx;box-shadow: 0rpx 4rpx 24rpx 0rpx #96979929;" />
              </view>
              <view class="fz-12 u-p-t-16 themeFontColor justify-center items-center">
                <text class="fz-10">赚￥</text>
                <text>{{goods.maxCommission}}</text>
              </view>
            </view>
            <view v-if="item.goodsSquareVOList.length==2" style="width: 196rpx;height: 2rpx;opacity: 0;">
            </view>
            <view v-if="!item.goodsSquareVOList.length" class="notGoodsSquare">TA没有更多的货可以被帮卖</view>
          </view>
        </view>
      </template>
    </ScrollList>
  </view>
</template>
<script>
import DefaultPage from "@/components/defaultPage/index.vue";
import ScrollList from "@/components/scrollList/index.vue";
import goods from "@/api/goods.js";
export default {
  name: "shopPage",
  components: {
    DefaultPage,
    ScrollList
  },
  props: {
    searchCriteria: {
      type: String,
      default: ''
    },
    tabsCur: {
      type: String,
      default: ''
    },
  },
  watch: {
    searchCriteria(){ // 搜索字段有变化刷新
      if (this.tabsCur==1) {
        this.getParams.currentPage = 1
        this.getParams.finish = false
        this.getShopListFn()
      }
    },
  },
  data () {
    return {
      getParams: {
        currentPage: 1,
        pageSize: 10,
        finish: false, // 是否还有更多
        loading: true
      },
      shopList: [],
    }
  },
  created() {
    this.getShopListFn()
  },
  methods: {
    async getShopListFn () {
      this.getParams.loading = true
      this.getParams = { // 合并搜索字段
        ...this.getParams,
        searchCriteria: this.searchCriteria || '',
      }
      const { data } = await goods.getStoreSquare(this.getParams)
      if (data.records) {
        data.records.forEach((item, i) => { // 处理image为字符串的问题
          if (item.goodsSquareVOList&&item.goodsSquareVOList.length>0) {
            item.goodsSquareVOList.forEach((goods, j) => {
              data.records[i].goodsSquareVOList[j].image=JSON.parse(goods.image)
            })
          }
        })
        if (this.getParams.currentPage === 1) {
          this.shopList = data.records
        } else {
          this.shopList.push(...data.records)
        }
        this.getParams.finish = this.getParams.currentPage * this.getParams.pageSize !== this.shopList.length
      }
      this.getParams.loading = false
    },
    // 加载更多
    async scrolltolower() {
      this.getParams.currentPage += 1;
      await this.getShopListFn();
      this.$refs.scrollView.loadFinish(this.getParams.finish ? 3 : 0); // 加载完成，是否还有更多
    },
    // 刷新
    async interrupt() {
      this.getParams.currentPage = 1;
      this.getParams.finish = false;
      await this.getShopListFn();
      setTimeout(() => {
        this.$refs.scrollView.refreshFinish(); // 刷新完成
      }, 500);
    },
  },
  // 分享
  onShareAppMessage() {
    return {
      path: '/pages/index/index',
      title: "我想帮你卖货，快来发布商品设置佣金！供货分销轻松收单！",
      imageUrl: `https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/bgImg/new_selectGoods_share.png?t=${Date.parse(new Date())}`,
    };
  },
}
</script>
<style lang="scss" scoped>
.shopPage_box {
  background: #F7F8FA;
  height: 100%;
  .shopList_box {
    background: #FFF;
    box-shadow: 0rpx 4rpx 24rpx rgba(150, 151, 153, 0.16);
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    &:last-child {
      margin-bottom: 0rpx;
    }
    .shop_user_box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      .shop_user_l {
        width: calc(100% - 120rpx);
        display: flex;
        align-items: center;
        .communityLogo_box {
          width:64rpx;
          height:64rpx;
          border-radius: 50%;
          flex: 0 0 auto;
        }
        .communityName_box {
          width: calc(100% - 90rpx);
          height: 64rpx;
          line-height: 64rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap !important;
        }
      }
      .shop_user_r {
        width: 120rpx;
        flex: 0 0 auto;
        color: #969799;
      }
    }
    .goods_msg_list {
      .notGoodsSquare {
        width: 100%;
        text-align: center;
        color: #C8C9CC;
        padding: 8rpx 0;
      }
    }
  }
}
.defaultBtn {
  background: #e44435;
  padding: 0 30rpx;
  border-radius: 60rpx;
  color: #fff;
  line-height: 60rpx;
  margin: 0 auto;
  margin-top: 25rpx;
  font-size: 28rpx;
}
</style>